<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="./dist/owlcarousel/assets/owl.carousel.min.css">
	<link rel="stylesheet" type="text/css" href="./dist/owlcarousel/assets/owl.theme.default.min.css">

	
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.container ul {
		padding: 0;
		margin: 0 auto;
		list-style: none;
	}
	.container ul li {
		margin-bottom: 20px;
		padding: 0 15px 20px;
		border-bottom: 1px solid #ddd;
	}
	.container ul li img {
		width: 100%;
		border-radius: 4px;

	}
	header {
		border-bottom: 1px solid #ddd;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 15px;
	}
	.logo {
		width: 100%;
		height: 100px;
		background-image: url('imgs/logo.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transform: scale(.5);
	}
	header .user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}
	header .user img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	header .user span {
		margin-top: 10px;
	}
	.banner {
		margin-bottom: 20px;
	}
	.banner .owl-carousel .item {
		display: block;
	}
	.banner .owl-carousel img {
		display: block;
		width: 100%;
	}
	.product-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		font-size: 18px;

	}
	.product-info .price {
		font-size: 24px;
		color: #C00003;
	}

</style>
        <script>
        var _hmt = _hmt || [];
        </script>
</head>
<body>
	<header>
		<div class="logo"></div>
		<section class="user">
			<img src="./imgs/user@default.png">
			<span>用户昵称</span>
		</section>
	</header>
	<section class="container">
		<div class="banner">
			<div class="owl-carousel owl-theme">
				<div class="item"><img src="imgs/1.png" alt="图片"></div>
				<div class="item"><img src="imgs/2.png" alt="图片"></div>
				<div class="item"><img src="imgs/3.png" alt="图片"></div>
			</div>
		</div>
		<div class="picture-container">
			<ul>
				<li>
					<img src="./imgs/1.png">
					<div class="product-info">
						<span>字母刺绣宽松连帽T恤</span>
						<span class="price">￥599</span>
					</div>
				</li>
				<li>
					<img src="./imgs/2.png">
					<div class="product-info">
						<span>字母刺绣宽松连帽T恤</span>
						<span class="price">￥599</span>
					</div>
				</li>

			</ul>
		</div>
	</section>
	
	<script type="text/javascript" src="./dist/jquery.min.js"></script>
	<script type="text/javascript" src="./dist/owlcarousel/owl.carousel.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".owl-carousel").owlCarousel({
				items: 1,
				loop: true,
				lazyLoad: true,
				autoplay:true,
				autoplayTimeout:3000,
				autoplayHoverPause:true,
				dots: true

			});
		});
	</script>
        <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + 
"hm.baidu.com/h.js%3F01234567890ABCDEF01234567890ABCDEF' type='text/javascript'%3E%3C/script%3E"));
        </script>
        _hmt.push(['_trackPageview', '/ochirly_sku1']);
</body>
</html>







